import React, { useState, useEffect } from 'react'
import { NavBar, Image, List, InfiniteScroll, DotLoading } from 'antd-mobile'
import { libraryList, } from '../service/library'
import { useNavigate } from "react-router-dom"
import "../css/library.css"

const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
  return (
    <>
      {hasMore ? (
        <>
          <span>加载中</span>
          <DotLoading />
        </>
      ) : (
        <span>--- 我是有底线的 ---</span>
      )}
    </>
  )
}

export default function Library() {
  let navigate = useNavigate();
  const back = () =>
    navigate("/");

  const [librarylist, setlibrarylist] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setpage] = useState({ pageNum: 1, pageSize: 5 })
  async function loadMore() {
    setHasMore(false)
    let search = async () => {//页面加载请求数据
      let res = await libraryList({ pageNum: page.pageNum, pageSize: page.pageSize })
      // console.log(res);

      setpage({ pageNum: page.pageNum + 1, pageSize: 10 })
      let List = librarylist.concat(res.data.rows)
      setlibrarylist(List)
      setHasMore(res.data.rows.length > 0)
      if (page.pageNum > 5) {
        setHasMore(false)
      }

    }
    search()
  }

  useEffect(() => {
    loadMore()
  }, [])


  return (
    <div className='library-all'>
      <NavBar onBack={back}>数字图书馆</NavBar>
      <List>
        {librarylist && librarylist.map((item: any) => (
          <List.Item
            key={item.name}
            prefix={
              <Image
                className='libraryimg'
                src={"/api2" + item?.imgUrl}
                style={{ borderRadius: 10 }}
                fit='cover'
                width={300}
                height={150}
                onClick={() => { navigate("/librarycom", { state: { id: item.id, name: item.name } }) }}
              />
            }
            description={item.address}
          >
            {item.name}
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
        <InfiniteScrollContent hasMore={hasMore} />
      </InfiniteScroll>
    </div>
  )
}


